<!-- 单位职位 -->
<template>
	<div class="enterprisePosition">
		<div class="page flex-col">
			<div class="box_1 flex-row">
				<div class="banner">
					<!-- 头部 -->
					<el-header></el-header>
				</div>
			</div>
			<div class="box_2 flex-col">
				<div class="banner">
					<div class="group_1 flex-row justify-between">
						<div class="box_3 flex-col">
							<div class="text-wrapper_2 flex-col">
								<img class="label_4" referrerpolicy="no-referrer"
									src="../../assets/images/recruitmentData/2.png" />
								<span class="text_9">职位</span>
							</div>
							<div class="text-wrapper_1 flex-col" @click="toeditinfo">
								<img class="thumbnail_2" referrerpolicy="no-referrer"
									src="../../assets/images/enterpriseIndex/zpzy.png" />
								<span class="text_8">招聘主页</span>
							</div>
						</div>
						<div class="box_4 flex-col justify-between">
							<!-- 职位发布 -->
							<div class="tit">
								<h5>职位发布</h5>
								<button @click="postPosition">
									<img class="thumbnail_3" referrerpolicy="no-referrer"
										src="../../assets/images/enterprisePosition/fb.png" />
									<span class="text_12" style="background-color: #D83524 !important;">发布职位</span>
								</button>

							</div>
							<!-- 在线中 -->
							<div class="online">
								<div class="line1">
									<ul>
										<li :class="{ 'line-ui-active': index == navKey }" v-for="(item, index) in navs"
											:key="index" @click="navClick(index)">{{ item.name }}</li>
									</ul>
								</div>
							</div>
							<!-- 后端开发工程师 -->
							<div v-if="list.length > 0">
								<div class="list" v-for="(item, index) in list" :key="index">
									<div class="top">
										<h4>{{ item.jobtitle }}</h4>
										<div class="upload">
											<div class="image-text_2a flex-row justify-between" @click="refuse(item)"
												v-if="is_refuse">
												<img class="thumbnail_7" referrerpolicy="no-referrer"
													src="../../assets/images/enterprisePosition/bh.png" />
												<span class="text-group_2">驳回原因</span>
											</div>
										</div>
										<div class="info">
											<div>{{ item.express }} | {{ item.work_place }} | 招{{ item.num }}人</div>
											<div>报名时间：{{ item.begin_time }} 至 {{ item.end_time }}</div>
										</div>
									</div>
								</div>
							</div>
							<div class="none" v-else>
								<img src="../../assets/images/none/none.png" alt="">
							</div>
							<!-- 页码 -->
							<el-pagination hide-on-single-page :background="isBackground" prev-text="上一页"
								next-text="下一页" layout="prev, pager, next" :page-size="20" :total="info.job_count"
								:current-page="page" @current-change="currentChange"></el-pagination>
							<div class="modal" v-if="isVisible">
								<div class="modal-content">
									<div class="modal-title">
										<span class="close" @click="closeModal">&times;</span>
										<div class="sq_text">
											驳回原因</div>
									</div>
									<div class="content">
										<el-input type="textarea" disabled :rows="10" placeholder="驳回原因"
											v-model="refuse_reason" class="textarea">
										</el-input>
									</div>
									<div class="form-buttons">
										<div>
											<el-button type="danger" @click="closeModal">确定</el-button>
											<el-button @click="closeModal">取消</el-button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import elHeader from "../../common/elHeader.vue";

	export default {
		data() {
			return {
				input: "",
				isBackground: true, //设置为true
				navs: [{
						name: "待审核",
						id: 0
					},
					{
						name: "通过",
						id: 1
					},
					{
						name: "驳回",
						id: 2
					},
					{
						name: "下线",
						id: 3
					}
				],
				navKey: 0,
				name: "",
				list: [],
				info: {},
				page: 1,
				is_finsh: '',
				is_refuse: false,
				is_out: false,
				is_edit: true,
				isVisible: false,
				refuse_reason: '',
			};
		},
		mounted() {
			this.getList()
			this.getInfo()
		},
		created() {
			this.is_finsh =  localStorage.getItem('is_finsh')
		},
		methods: {
			async getList() {
				this.loading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(255, 255, 255, 0.7)'
				})
				const res = await this.$service.post({
					url: "/api/zp/v1/zpapp_comp_job",
					data: {
						page: this.page,
						status: this.navs[this.navKey].id,
						name: this.name
					}
				})
				if (this.loading) {
					this.loading.close()
				}
				this.list = res.info.job_list
				this.info = res.info
			},
			async offline(item) {
				console.log(item)
				const res = await this.$service.post({
					url: "/api/zp/v1/zpapp_comp_offline_job",
					data: {
						job_id: item.job_id
					}
				})
				console.log(res)
				this.$message(res.msg)
				if (res.code == 1) {
					this.getList()
				}
			},
			currentChange(page, size) {
				this.page = page
				console.log(page, this.page)
				this.getList()
			},
			navClick(key) {
				this.navKey = key
				console.log(this.navKey, 'this.navKey');
				if (this.navKey == '1') {
					this.is_out = true
					this.is_refuse = false
					console.log('222');
				} else if (this.navKey == '2') {
					this.is_refuse = true
					this.is_out = false
				} else {
					this.is_out = false
					this.is_refuse = false
				}
				this.getList()
			},
			edit(item) {
				this.$router.push("/postPositionEdit?id=" + item.job_id)
			},
			refuse(item) {
				console.log(item, '111')
				this.refuse_reason = item.refuse_reason
				this.isVisible = true
			},
			enterprisePosition() {
				this.$router.push("/enterprisePosition")
			},
			postPosition() {
				if (this.is_finsh == 1) {
					this.$router.push("/postPosition")
				} else {
					this.$message('请完善单位信息')
				}
			},
			async getInfo() {
			  const res = await this.$service.get({
			    url: "/api/zp/v1/zpapp_comp_info",
			  });
			  if (res.code == 1) {
			    if(res.info.industry_id>0 && res.info.stage_id>0)
				{
				  localStorage.setItem("is_finsh", 1);
				}
			
			  
			  } 
			},
			closeModal() {
				this.isVisible = false
				this.list.refuse_reason = ''
			},
			toeditinfo() {
				this.$router.push("/editInfo")
			}
		},
		components: {
			elHeader
		},
	};
</script>

<style scoped>
	body * {
		cursor: default;
	}

	.none {
		position: relative;
		height: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.none img {
		width: 150px;
		height: 188px;
	}

	::v-deep .el-pagination {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	::v-deep .el-pagination.is-background .el-pager li {
		width: 40.37px;
		height: 32.43px !important;
		line-height: 32.43px;
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		text-align: center;
		background-color: #fff;
		color: #000000;
		border: 1px solid #CED9EE;
	}

	/* 激活后的样式 */
	::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #D02F1E;
		text-align: center;
	}

	::v-deep .el-pagination button,
	::v-deep .el-pagination span:not([class*=suffix]) {
		background-color: #fff;
		border: none;
		border: 1px solid #CED9EE;
		width: 61px;
		height: 32px;
	}

	::v-deep .box_2 {
		padding: 34px 0;
		box-sizing: border-box;

	}

	.thumbnail_4 {
		background-color: #fff !important;
	}

	.inputbox {
		background-color: #fff !important;
	}

	::v-deep .el-button--danger span {
		background-color: #F56C6C !important;
	}

	::v-deep .el-button--danger {
		background-color: #F56C6C !important;
	}

	* {
		list-style: none;

	}

	.page {
		background-color: #f3f3f3 !important;
		position: relative;
	}

	.box_1 {
		background-color: #fff !important;
	}

	.box_3 img.label_4 {
		background: rgb(252, 247, 247) !important;
	}

	.banner {
		width: 1200px;
		margin: 0 auto;
	}

	.header {
		height: 117px;
		background-color: #fff;
		display: flex;
	}

	.header span {
		background-color: #fff;
	}

	.image_1 {
		width: 221px;
		height: 51px;
		margin-top: 31px;
		background-color: #fff;
		margin-right: 589px;
	}

	.text_1 {
		width: 32px;
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 16px;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 24px;
		background-color: #fff;
	}

	.text_2 {
		width: 64px;
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 16px;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 24px;
	}

	.download img,
	.message img {
		width: 23px;
		margin-right: 10px;
		background: #fff;
		position: relative;
		top: 5px;
	}

	.download,
	.message {
		width: 97px;
		height: 117px;
		padding-top: 43px;
		box-sizing: border-box;
		background: #fff;
		padding-left: 26px;
		right: 385px;
	}



	.headsculpture {
		background: #fff;
	}

	.text_3 {
		width: 64px;
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 16px;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 24px;
		margin: 49px 0 0 74px;
	}

	.text_4 {
		width: 64px;
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 16px;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 24px;
		margin: 49px 0 0 80px;
	}

	.text_5 {
		width: 153px;
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(217, 4, 3, 1);
		font-size: 16px;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 24px;
		margin: 49px 0 0 83px;
	}

	.image_2 {
		width: 54px;
		height: 54px;
		margin: 36px 0 0 40px;
		background-color: #fff;
	}

	.text_6 {
		width: 32px;
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 16px;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 24px;
		margin: 51px 0 0 10px;
		position: relative;
		top: -22px;
	}

	.group_1 {
		width: 1204px;
		display: flex;
		justify-content: space-between;
		/* padding-top: 28px; */
		margin-top: 28px;
		/* box-sizing: border-box; */
		/* background-color: #fff !important; */
	}

	.box_3 {
		background-color: rgba(255, 255, 255, 1) !important;
		width: 280px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.box_3 img {
		background-color: #fff !important;
	}

	.image_3 {
		width: 102px;
		height: 102px;
		background-color: #fff;
	}

	.text_7 {
		width: 280px;
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 20px;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: right;
		white-space: nowrap;
		line-height: 24px;
		background: #fff;
		display: flex;
		justify-content: center;
		margin-top: 27px;
	}

	.text-wrapper_1 {
		height: 56px;
		background-color: #fff !important;
		width: 280px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text_8 {
		width: 64px;
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 16px;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		white-space: nowrap;
		line-height: 24px;
		margin-left: 26px;
		background-color: #fff !important;
	}

	.text-wrapper_2 {
		height: 56px;
		background: rgb(252, 247, 247) !important;
		background-size: 100% 100%;
		width: 280px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text_9 {
		width: 64px;
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(244, 0, 19, 1);
		font-size: 16px;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		white-space: nowrap;
		line-height: 24px;
		background-color: #FCF7F7 !important;
		margin-left: 26px;
	}


	.text_10 {
		width: 64px;
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 16px;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: right;
		white-space: nowrap;
		line-height: 24px;
		background-color: #fff;
	}


	.text_11 {
		width: 64px;
		height: 24px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 16px;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: right;
		white-space: nowrap;
		line-height: 24px;
		background-color: #fff;
	}

	.box_4 {
		width: 892px;
	}

	.tit {
		width: 892px;
		height: 72px;
		background: #FFFFFF !important;
		margin-bottom: 21px;
		display: flex;
		align-items: center;
		padding-left: 40px;
		box-sizing: border-box;
	}

	.tit button {
		width: 150px;
		height: 38px;
		background: #D83524 !important;
		border-radius: 4px;
		border: none;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin-right: 14px;
	}

	.tit button:last-child {
		width: 150px;
		height: 38px;
		/* background: #FFFFFF !important; */
		border-radius: 4px;
		border: 1px solid #D83524;
	}

	.tit .thumbnail_3 {
		width: 20px;
		height: 20px;
		background: #D83524 !important;
	}

	.tit h5 {
		background: #FFFFFF !important;
		width: 220px;
		height: 22px;
		font-size: 16px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #121212;
		line-height: 22px;
		margin-right: 454px;
	}

	.tit .text_12 {
		background: #D83524 !important;
		width: 64px;
		width: 78px;
		height: 20px;
		font-size: 16px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 20px;
		margin-left: 11px;
	}

	.online {
		width: 892px;
		background: #FFFFFF !important;
	}

	.line1 {
		width: 862px;
		height: 74px;
		background: #FFFFFF !important;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		border-bottom: 1px solid #ECEBEB;
		padding-right: 30px;
	}

	.line1 .inputs {
		width: 200px;
		margin-right: 10px;
	}

	.line-ui-active {
		color: #D83524;
	}

	.line1 ul {
		height: 74px;
		width: 415px;
		display: flex;
		padding: 0 58px 0 30px;
		box-sizing: border-box;
		justify-content: space-between;
		background: #FFFFFF !important;
		cursor: pointer;
	}

	.line1 li {
		background-color: #fff !important;
		height: 74px;
		display: flex;
		align-items: center;
	}

	.line1 input {
		width: 247px;
		height: 32px;
		background: #FFFFFF !important;
		border-radius: 2px;
		border: 1px solid #DDD8D8;
		padding-left: 34px;
		box-sizing: border-box;
	}

	.line1 .thumbnail_5 {
		position: absolute;
		left: 627px;
		background-color: #fff !important;
	}

	.online .box {
		height: 153px;
		padding: 18px 0 0 30px;
		box-sizing: border-box;
		background-color: #fff;
	}

	.line2 {
		height: 47px;
		width: 862px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ECEBEB;
		background-color: #fff;
	}

	.line2 ul {
		display: flex;
		background-color: #fff;
	}

	.line2 li,
	.line2 div {
		background-color: #fff;
	}

	.line2 li {
		font-size: 14px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #000000;
		display: flex;
		padding: 0 10px;
		margin: 0 7px;
		box-sizing: border-box;
		align-items: center;
	}

	.line2 li:nth-child(1) {
		padding: 0;
		display: flex;
		width: 54px;
		height: 27px;
		background: #FFF4F4;
		border-radius: 4px;
		border: 1px solid #F94547;
		display: flex;
		align-items: center;
		text-align: center;
		font-size: 14px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #FE0404;
		justify-content: center;
		margin-right: 14px;
	}

	.line2 .city {
		width: 28px;
		height: 20px;
		font-size: 14px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 20px;
		margin-right: 34px;
	}

	.list {
		width: 892px;
		background: #FFFFFF !important;
		margin-top: 10px;
		position: relative;
	}

	.el-checkbox-group {
		background: #fff;
		width: 14px;
		height: 14px;
	}

	.el-form-item {
		background: #fff;
		margin-bottom: 0;
	}

	.el-checkbox:last-of-type {
		background: #fff;
	}

	.list h4 {
		width: 369px;
		height: 25px;
		font-size: 18px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 25px;
		background: #fff !important;
		position: absolute;
		left: 57px;
		margin-top: 1px;
	}

	.el-form-item__content {
		background: #fff;
	}

	.el-checkbox__input {
		background: #fff;
	}

	.top {
		height: 160px;
		background: #fff !important;
		padding: 34px 20px 0 30px;
		box-sizing: border-box;
	}

	.el-checkbox__inner {
		position: absolute;
		left: -81px;
		top: -21px;
	}

	.image-text_2 {
		width: 50px;
		height: 16px;
		background: #fff !important;
		display: flex;
		align-items: center;
	}

	.image-text_2a {
		width: 80px;
		height: 16px;
		background: #fff !important;
		display: flex;
		align-items: center;
		margin-left: -72px;
	}


	.thumbnail_6 {
		width: 17px;
		height: 16px;
		background: #fff !important;
	}

	.thumbnail_7 {
		width: 17px;
		height: 16px;
		background: #fff !important;
	}

	.el-icon-edit {
		width: 17px;
		height: 16px;
	}

	.text-group_2 {
		background: #fff !important;
		width: 28px;
		height: 16px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 14px;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 16px;
		margin-left: 5px;
	}

	.upload {
		width: 170px;
		height: 17px;
		display: flex;
		justify-content: space-between;
		position: absolute;
		left: 703px;
		top: 34px;
		background-color: #fff !important;
	}

	.info {
		width: 842px;
		margin-top: 15px;
		height: 65px;
		font-size: 16px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666660;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		background-color: #fff !important;
		padding-left: 30px;
		box-sizing: border-box;
	}

	.info div {
		width: 842px;
		margin-top: 20px;
		background-color: #fff !important;
	}

	.send {
		height: 59px;
		border-top: 1px solid #EBEAEA;
		background-color: #fff;
		padding: 18px 0 0 61px;
		box-sizing: border-box;
	}


	.content {
		background-color: unset;
	}

	.modal {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0%;
		left: 0%;
	}

	.modal-content {
		background-color: #fefefe;
		height: 64%;
		margin: auto;
		border: 1px solid #888;
		width: 57%;

	}

	.close {
		color: #aaa;
		float: right;
		font-size: 28px;
		font-weight: bold;
	}

	.close:hover,
	.close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}

	.sq_text {
		width: 200px;
		height: 40px;
		line-height: 65px;
		margin-left: 32px;
		font-size: 20px;
		font-weight: 600;
	}





	.textarea {
		padding: 26px 52px;
		width: 88%;

	}

	::v-deep .el-textarea__inner {
		min-height: 292.6px !important;
		max-height: 292.6px !important;
	}

	.form-buttons {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20px;
		padding: 0px 358px;
		width: 150px;
	}

	.modal-title {
		height: 67px;
		background-color: #f3f3f3;
		margin-top: -19px;
		width: 100%;
	}
</style>